<template>
  <!-- 曝光合集 -->
  <div class="exposure">
    <div class="exposure-container">
      <el-row class="header">
        <el-col
          v-for="(item, index) in data"
          :key="index"
          :span="24 / data.length"
          :class="{active: index === activeIndex}"
        >
          <div class="btn" @click="switchTab(index)">{{item.header}}</div>
        </el-col>
      </el-row>
      <div class="content" :style="contentStyle">
        <div class="block"
          v-for="(item, index) in data"
          :key="index"
          :style="{ width: 100 / data.length + '%'}"
        >
          <el-row class="title">
            <el-col
              v-for="(sub, index) in item.title"
              :key="index"
              :span="24 / item.title.length"
            >
              {{sub.name}}
            </el-col>
          </el-row>
          <el-row
            class="row"
            v-for="row in item.list"
            :key="row.id"
          >
            <el-col
              v-for="(col, index) in row.renderData"
              :key="index"
              :span="24 / row.renderData.length"
            >
              {{col}}
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Exposure',
  props: {
    data: {
      type: Array,
      default() {
        return [
          {
            header: '娱乐城曝光合集',
            title: [
              { key: 'name', name: '娱乐城' },
              {
                key: 'count',
                name: '担保次数',
                formatter(row, value) {
                  return value + row.unit;
                }
              },
            ],
            list: [
              {
                id: '1', name: '葡京', count: 316, unit: '次'
              },
              {
                id: '2', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '3', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '4', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '5', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '6', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '7', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '8', name: '巴黎人', count: 26, unit: '次'
              },
              {
                id: '9', name: '巴黎人', count: 26, unit: '次'
              }
            ]
          },
          {
            header: '彩票曝光合集',
            title: [
              { key: 'name', name: '彩票' },
              {
                key: 'count',
                name: '担保次数',
                formatter(row, value) {
                  return value + row.unit;
                }
              },
            ],
            list: [
              {
                id: '1', name: '福彩网', count: 316, unit: '次'
              },
              {
                id: '2', name: '幸运彩票', count: 26, unit: '次'
              }
            ]
          }
        ];
      }
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  computed: {
    tableData() {
      let { data } = this;
      if (!Array.isArray(data)) {
        data = [data];
      }
      const len = data.length;
      for (let i = 0; i < len; i += 1) {
        const block = data[i];
        const title = Array.isArray(block.title) ? block.title : [block.title];
        for (let j = 0; j < title.length; j += 1) {
          const item = title[j];
          if (item.formatter && typeof item.formatter === 'function') {
            this.formatterData(item.key, item.formatter);
          }
          const { list } = block;
          for (let k = 0; k < list.length; k += 1) {
            const rd = list[k].renderData ? list[k].renderData : [];
            list[k].renderData = rd;
            rd.push(list[k][item.name]);
          }
        }
      }
      return data;
    },
    contentStyle() {
      return {
        width: `${this.data.length * 100}%`,
        // eslint-disable-next-line no-mixed-operators
        transform: `translateX(${-this.activeIndex / this.data.length * 100}%)`
      };
    }
  },
  methods: {
    formatter() {
      let { data } = this;
      if (!Array.isArray(data)) {
        data = [data];
      }
      const len = data.length;
      for (let i = 0; i < len; i += 1) {
        const block = data[i];
        const title = Array.isArray(block.title) ? block.title : [block.title];
        for (let j = 0; j < title.length; j += 1) {
          const item = title[j];
          if (item.formatter && typeof item.formatter === 'function') {
            this.formatterData(item.key, item.formatter);
          }
          const { list } = block;
          for (let k = 0; k < list.length; k += 1) {
            const rd = list[k].renderData ? list[k].renderData : [];
            list[k].renderData = rd;
            rd.push(list[k][item.key]);
          }
        }
      }
    },
    /**
     * 格式化数据
     * @param {String} key 数据的键
     * @param {Function} formatter 格式化函数
     */
    formatterData(key, formatter) {
      const { data } = this;
      for (let i = 0; i < data.length; i += 1) {
        const { list } = data[i];
        for (let j = 0; j < list.length; j += 1) {
          list[j][key] = formatter(list[j], list[j][key], j);
        }
      }
    },
    // tab切换
    switchTab(index) {
      console.log(index);
      this.activeIndex = index;
    }
  },
  created() {
    this.formatter();
    console.log(this.data);
  },
  updated() {
    console.log('updated');
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .exposure {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px hsla(0,0%,57.6%,.3);
    .exposure-container {
      overflow: hidden;
      .header {
        margin-bottom: 5px;
        font-size: 16px;
        border-radius: 8px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #9ca6b7;
        cursor: pointer;
        background: #f3f5fb;
        &.el-col:first-child {
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        &.el-col:last-child {
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .el-col.active {
          position: relative;
          font-size: 18px;
          background: @mainBgColor;
          border-radius: 5px;
          color: #fff;
          &::after {
            position: absolute;
            bottom: -10px;
            content: '';
            border: 5px solid transparent;
            border-top: 5px solid @mainBgColor;
          }
        }
      }
      .content {
        display: flex;
        transition: transform ease .3s;
        .block {
          color: #7a7a95;
          .el-row {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ddd;
            &:last-child {
              border: 0;
            }
            &.title {
              font-weight: bold;
              font-size: 16px;
              color: #7a7a95;
            }
            .el-col {
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
